<template>
<div class="topicdetails">
    <w-header></w-header>
    <div id="Postacomment">
        <b-modal id="modal-Postacomment" centered title="发布评论" hide-footer>
            <b-form>
                <el-row>
                    <el-col :span="24">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="list.body">
                        </el-input>
                    </el-col>
                </el-row>
                <div style="margin-top:20px"></div>
                <el-row>
                    <el-col :span="24">
                        <div class="demo-image__preview">
                            <el-image style="width: 100px; height: 100px" :src="list.imgUrl">
                            </el-image>
                        </div>
                        <b-form-file class="mt-3" @change="upLoadAvatar" id="file-large" size="md"></b-form-file>
                    </el-col>
                </el-row>
                <div style="margin-top:20px"></div>
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" @click="isStartPost">发表评论</el-button>
                    </el-col>
                </el-row>

            </b-form>
        </b-modal>
    </div>
    <b-container>
        <b-row>
            <b-col cols="12">
                <b-card>
                    <b-card-body>
                        <h4>{{user.title}}</h4>
                        <b-row>
                            <b-col md="4">
                                <ul>
                                    <li>发布人姓名:{{row.username}}</li>
                                    <li>发布时间:{{user.createTime}}</li>
                                    <li>uid:{{row.uid}}</li>
                                </ul>
                            </b-col>
                            <b-col md="4">
                                <ul>
                                    <li>分类:
                                        <span v-for="(item,index) in user.cid" :key="index">{{item}}</span>
                                    </li>
                                    <li>评论:{{row.chat}}</li>
                                    <li>阅读量:{{useradi.views}}</li>
                                </ul>
                            </b-col>
                            <b-col md="4">
                                <b-button variant="danger" v-b-modal.modal-Postacomment>回复</b-button>
                                <el-button type="warning" icon="el-icon-thumb" style="margin-left:10px" @click="ArtPraise" circle></el-button>
                            </b-col>
                        </b-row>
                    </b-card-body>
                </b-card>
            </b-col>
        </b-row>
        <div class="aasd"></div>
        <b-row>
            <b-col mt-5>
                <div>
                    <b-card no-body>
                        <b-tabs pills>
                            <b-tab title="详情">
                                <b-card-text>
                                    <b-img :src="user.imgUrl" style="width:200px;height:200px"></b-img><br>{{user.body}}
                                </b-card-text>
                            </b-tab>
                            <b-tab title="评论">
                                <b-card-text>
                                    <div class="comments">
                                        <ul>
                                            <li v-for="(user,index) in listclass" :key="index">
                                                <div class="imgurlacd">
                                                    <b-img :src="user.avatar"></b-img>
                                                </div>
                                                <div class="ullibody">
                                                    <span>{{user.username}}</span><br>
                                                    <p>{{user.body}}</p>
                                                    <b-img :src="user.imgUrl" v-if="user.imgUrl!==''"></b-img>
                                                </div>

                                            </li>
                                        </ul>
                                    </div>
                                </b-card-text>
                            </b-tab>
                        </b-tabs>
                    </b-card>
                </div>
            </b-col>
        </b-row>
    </b-container>
</div>
</template>

<script>
// import axios from 'axios';
export default {
    name: "Topicdetails",

    data() {
        return {
            row: JSON.parse(this.$route.params.id),
            user: {

            },
            useradi: {},
            listclass: {

            },
            listArr: {
                body: "",
                imgUrl: ""
            },
            list: {
                body: "",
                imgUrl: "",
                aid: JSON.parse(this.$route.params.id).aid,
            },
            dzang: {
                aid: JSON.parse(this.$route.params.id).aid,
            },
            dzangcx: {
                aid: JSON.parse(this.$route.params.id).aid,
            },
        };

    },
    created() {
        this.PublicInfo();
        this.Listtwo();
        this.ArticleViews();
        this.user = this.row;
        this.CommentList();
        this.Givealike()
    },
    methods: {
        PublicInfo() {
            this.$userApi.userPublicInfo(this.row.uid).then((res) => {
                console.log(res);
                this.row = res.data

            })
        },
        Listtwo() {
            this.$artApi.islist().then((res) => {
                console.log(res);
            })
        },
        ArticleViews() {
            this.$artApi.articleViews(this.row).then((res) => {
                this.useradi = res.data

            })
        },
        CommentList() {
            let listaid = {};
            listaid.aid = this.row.aid;
            console.log(this.row.aid);
            this.$artApi.commentList(listaid).then((res) => {
                console.log(res);
                this.listclass = res.data
            })
        },
        isStartPost() {
            this.$artApi.isstartpost(this.list).then((res) => {
                this.listArr = res.data
                console.log(res);
                if(res.body){
                     this.$message({
                        message:res.body,
                        type: 'warning'
                    });
                }
            })
        },
        upLoadAvatar(e) {
            console.dir(e.target.files[0]);
            let formData = new FormData();
            formData.append("file", e.target.files[0]);
            this.$axios
                .post("/common/filesUpload.php", {
                    data: formData,
                    processData: false,
                    contentType: false,
                })
                .then((res) => {
                    //   console.log(res);
                    this.list.imgUrl = res.data.url;
                });
        },
        ArtPraise() {
            this.$artApi.artPraise(this.dzang).then((res) => {
               
                if (res.data == 1) {
                    this.$message({
                        message: '点赞成功',
                        type: 'success'
                    });
                } else if(res.data == 0){
                    this.$message({
                        message: '点赞取消',
                        type: 'warning'
                    });
                }
                 console.log(res);
            })
        },
        Givealike() {
            this.$artApi.givealike(this.dzangcx).then((res) => {
                console.log(res);
       
            })
        }

    }
}
</script>

<style lang="scss">
.topicdetails {

    ol,
    li {
        list-style: none;
    }

    .aasd {
        margin-top: 20px;
    }

    .comments ul li {
        display: flex;
        margin-top: 20px;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
        box-shadow: -10px -2px 0 rgba(128, 128, 128, 0.1);
    }

    .imgurlacd {

        margin-left: 20px;
        margin-top: 20px
    }

    .imgurlacd img {
        width: 50px;
        height: 50px;
    }

    .ullibody {
        margin-top: 20px
    }

    .ullibody>span {
        font-weight: bold;
        margin-left: 10px;
    }

    .ullibody p {
        margin-left: 10px;
    }

    .ullibody img {
        width: 300px;
        height: 300px;
        margin-bottom: 20px
    }
}
</style>
